<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <el-icon class="icon" size="20" @click="store.commit('collapseMenu')">
                <Fold />
            </el-icon>
            <ul class="flex-box">
                <li v-for="(item, index) in selectMenu" :key="item.path" :class="{ selected: item.path === route.path }"
                    class="tab flex-box">
                    <el-icon size="12">
                        <component :is="item.icon"></component>
                    </el-icon>
                    <RouterLink class="text flex-box" :to="item.path">
                        {{ item.name }}
                    </RouterLink>
                    <el-icon class="close" size="12" @click="closeTab(item, index)">
                        <Close />
                    </el-icon>
                </li>
            </ul>
        </div>
        <div class="header-right">
            <el-dropdown placement="top-start">
                <div class="el-dropdown-link flex-box">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <p class="user-name">{{ user }}</p>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <!-- <el-dropdown-item>Action 1</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item disabled>Action 4</el-dropdown-item> -->
                        <el-dropdown-item divided @click="loginOut">登出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

</template>
<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'
import { RouterLink, useRoute, useRouter } from 'vue-router'
// 获取
const store = useStore()
const selectMenu = computed(() => store.state.menu.selectMenu)
const route = useRoute()
const router = useRouter()

const user = computed(() => store.state.auth.user)

const username = store

const closeTab = (item, index) => {
    store.commit('closeMenu', item)
    if (!selectMenu.value.length) {
        router.push('/')
        return
    }
    if (item.path === route.path) {
        if (index === selectMenu.value.length) {
            router.push(selectMenu.value[index - 1].path)
            return
        }
        router.push(selectMenu.value[index].path)
    }
}

const loginOut = () => {
    localStorage.removeItem('token')

    router.replace({
        path: '/login',
        // path: '/auth/admin',
        // query: {s
        //     redirect: router.currentRoute.value.fullPath
        // }
    })
}


</script>
<style lang="less" scoped>
.flex-box {
    display: flex;
    align-items: center;
    height: 100%;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    background-color: #fff;

    // padding-left: 25px;
    .header-left {
        height: 100%;

        .icon {
            width: 45px;
            height: 100%;
        }

        .icon:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }

        .tab {
            padding: 0 10px;
            height: 100%;

            .text {
                margin: 0 5px;
            }

            .close {
                visibility: hidden;
            }

            &.selected {
                a {
                    color: #409eff;
                }

                i {
                    color: #409eff;
                }

                background-color: #f5f5f5;
            }
        }

        .tab:hover {
            background-color: #f5f5f5;
            height: 100%;

            .close {
                visibility: inherit;
                cursor: pointer;
                color: #000;
            }
        }
    }

    .header-right {
        margin-right: 20px;
        .user-name {
            margin-left: 10px;
        }
    }

    a {
        height: 100%;
        color: #333;
        font-size: 15px;
    }
}
</style>
